<template>
	<view class="container">
		<view class="header">
			<view class="title">
				<view class="box">
					<text class="a clamp">{{data.seller_name||''}}</text>
					<text class="b" style="padding: 0 2px;" v-if="data.rebate_proportion&&data.shop_commission_retrun_mode == 1">黑贝壳:{{((100-Number(data.rebate_proportion))*personal_shell_ration).toFixed(2)}}%</text>
					<text class="b" style="padding: 0 2px;" v-if="data.integral_rate&&data.shop_commission_retrun_mode == 2">积分:{{data.integral_rate}}%</text>
				</view>
			</view>
			<view class="info">
				<view class="info__rate">
					<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
					 :size="15" :current="data.quality" disabled></uni-rate>
					<text class="a">{{data.quality||0}}</text>
					<text>{{data.consumers||0}}人点评</text>
				</view>
				<view class="shop_info">
					<view class="left">
						<text v-if="data.quality_a_text">{{data.quality_a_text||''}}:{{data.quality_a||''}}</text>
						<text v-if="data.quality_b_text">{{data.quality_b_text||''}}:{{data.quality_b||''}}</text>
						<text v-if="data.quality_c_text">{{data.quality_c_text||''}}:{{data.quality_c||''}}</text>
					</view>
					<view class="right">
						<text>{{data.cate_name||''}}</text>
						<text>{{data.receive_address||''}}</text>
					</view>
				</view>
				<text class="label" v-if="labelArr[0]">
					<text v-for="(item,index) in labelArr" :key="index">{{item}}</text>
				</text>
				<view class="detail">
					<view>
						<block v-for="(item,index) in data.detail_image" :key="index">
							<image class="" @tap="viewImage(data.detail_image,index)" v-if="item != ''" :src="item" mode=""></image>
						</block>
					</view>
				</view>
				<view class="time_info">
					<view class="a">营业时间 {{data.business_hours||''}}</view>
					<view class="a">{{data.address||''}}</view>
					<view class="b">
						<text>距您 {{data.distance||''}}</text>
					</view>
				</view>
			</view>
			<view class="iconBox">
				<view class="a" @tap="viewMap">
					<image src="../../static/images/mall/12adw2.png" mode=""></image>
					<text>地图</text>
				</view>
				<view class="a" @tap="phoneCall">
					<image src="../../static/images/mall/132asd.png" mode=""></image>
					<text>电话</text>
				</view>
			</view>
		</view>
		<view class="border__top" v-if="data.is_open_online == 1">
			<view class="shop" @tap="goOnlineStore">
				<view class="shopInfo">
					<image class="" lazy-load :src="data.online_logo" mode=""></image>
					<view class="infoBox">
						<view class="title clamp">
							<text class="icon">自营</text>
							{{data.online_name}}
						</view>
						<view class="info__rate">
							<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
							 :size="16" :current="Number(data.online_product_average_score)" disabled></uni-rate>
							<text class="score">{{data.online_product_average_score}}</text>
							<text class="conclusion">{{data.collect}}人收藏</text>
						</view>

					</view>
				</view>
				<view class="goto">
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="goodsList">
					<view class="item" v-for="(item,index) in data.product_list" :key="index" @tap.stop="navTo('/mall/product/product?id=' + item.id)">
						<image :src="item.image" mode=""></image>
						<text class="clamp2">{{item.store_name}}</text>
					</view>
				</view>
				<view class="seeMore">
					<text>查看更多</text>
				</view>
			</view>
		</view>
		<view class="border__top">
			<view class="sellerInfo">
				<view class="menuBar">
					<!-- <text :class="active==0?'active':''" @tap="menu(0)">用户评价</text> -->
					<text :class="active==1?'active':''" @tap="menu(1)">商家信息</text>
				</view>
				<view class="commission" v-show="active == 0">
					<view class="commission_label">
						<view class="title">评价标签（{{commission_label_count}}）</view>
						<view class="item_box">
							<view class="item" v-for="(item,index) in tags_list" :key="index">
								{{item.name}} ({{item.count}})
							</view>
						</view>
					</view>
					<view class="eva-box">
						<image lazy-load class="portrait" src=""></image>
						<view class="right">
							<text class="name">张博伟</text>
							<text class="con">啊扩大解放尽快答复就是打开附件，打开JFK就看见看，是端口回复和。萨迪克立即回复客家话艰苦就会，的开发环境客户艰苦环境来看环境。</text>
							<view class="comment-pics">
								<image @tap.stop="showImg(item,index)" v-for="(item,index) in quarantine_report" :key="index" :src="item"
								 mode="aspectFill"></image>
							</view>
							<view class="bot">
								<!-- <text class="time">{{reply.add_time}}</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="sellerInfoDetail" v-show="active ==1">
					<view class="sellerInfoText">
						<view class="cell">
							<text class="a">店铺名称：</text>
							<text class="b">{{data.seller_name||''}}</text>
						</view>
						<view class="cell">
							<text class="a">经营品类：</text>
							<text class="b">{{data.cate_name||''}}</text>
						</view>
						<view class="cell">
							<text class="a">经营地址：</text>
							<text class="b">{{data.address||''}}</text>
						</view>
					</view>
					<view class="sellerInfoImg">
						<view class="title">
							店铺资质信息公示
						</view>
						<view class="img_box">
							<block v-for="(item,index) in quarantine_report" :key="index">
								<image :src="item" @tap="showImg(item,index)" mode=""></image>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'

	import {
		getsellerinfobyid
	} from "@/api/merchant.js"
	import {
		systemConfig
	} from '@/api/public.js'
	export default {
		components: {
			uniRate
		},

		data() {
			return {
				data: {},
				labelArr: [], //标签数组
				commission_label_count: 0,
				covers: [{
					latitude: null,
					longitude: null,
					iconPath: '/static/images/public/location.png'
				}],
				personal_shell_ration: 1,
				active: 1,
				tags_list: [],
				quarantine_report: []
			}
		},
		created() {
			systemConfig({
				filed: 'personal_shell_ration'
			}).then(res => {
				this.personal_shell_ration = Number(res.msg) / 100;
			})
		},
		onLoad(option) {
			getsellerinfobyid({
				seller_id: option.id,
				longitude: uni.getStorageSync("locatLongitude"),
				latitude: uni.getStorageSync("locatLatitude")
			}).then(res => {
				this.data = res.data.seller_info
				this.labelArr = res.data.seller_info.label.split(",")
				this.quarantine_report.push(res.data.seller_info.business_license)
				this.data.quarantine_report.split('"').forEach((val, index) => {
					if (val.length > 2) {
						val = val.replace(/\\\//g, '/')
						this.quarantine_report.push(val)
					}
				})
				this.tags_list = res.data.seller_info.tags.list
				this.tags_list.forEach((item, index) => {
					this.commission_label_count = this.commission_label_count + item.count
				})
				this.covers[0].latitude = res.data.seller_info.latitude
				this.covers[0].longitude = res.data.seller_info.longitude
			})
		},
		methods: {
			showImg(url, index) {
				uni.previewImage({
					urls: this.quarantine_report,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			menu(index) {
				this.active = index
			},
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.data.phone
				})
			},
			viewMap() {
				uni.openLocation({
					latitude: parseFloat(this.covers[0].latitude),
					longitude: parseFloat(this.covers[0].longitude),
					success: (res) => {
						console.log(res);
					}
				});
			},
			goOnlineStore() {
				uni.navigateTo({
					url: "/mall/product/onlineStore?id=" + this.data.seller_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.btn {
			margin: 0;
			border: 1rpx solid #57be6a;
			border-radius: 10px;
			font-size: 12px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #57be6a;
			background: white;
			position: relative;
			bottom: 30rpx;
		}

		.border__top {
			border-top: 20rpx solid #eeeeee;
			padding: 29rpx 0;
		}

		.header,
		.phone,
		.time,
		.detail {
			width: 690rpx;
			margin: 0 auto;
		}

		.header {
			padding: 20rpx 0 30rpx;
			position: relative;

			.title {
				display: flex;
				width: 100%;

				.box {
					display: flex;
					align-items: center;
					max-width: 100%;

					.a {
						flex: 1;
						letter-spacing: 0.5rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						font-size: 40rpx;
					}

					.b {
						margin-left: 10rpx;
						padding: 2rpx 5rpx;
						text-align: center;
						border: 1rpx solid #F86436;
						border-radius: 5rpx;
						font-size: 20rpx;
						color: #F86436;
					}
				}

			}

			.info {
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.info__rate {
					color: #666;
					font-size: 24rpx;

					.rate {
						margin-right: 20rpx;
					}

					.a {
						margin-right: 24rpx;
						color: #F86436;
					}
				}

				.shop_info {
					margin-top: 20rpx;
					display: flex;
					font-size: 24rpx;
					justify-content: space-between;

					.left {
						display: flex;
						color: #666;

						text {
							margin-right: 20rpx;
						}
					}

					.right {
						display: flex;
						color: #999;

						text {
							margin-left: 20rpx;
						}
					}
				}

				.label {
					display: flex;

					text {
						margin-right: 20rpx;
						padding: 2rpx 4rpx;
						background: #F6FCF9;
						border-radius: 4rpx;
						font-size: 22rpx;
						color: #36C177;
					}
				}

				.detail {
					margin-top: 20rpx;
					width: 700rpx;
					margin-left: -5rpx;
					view {
						display: flex;

						image {
							padding: 0 5rpx;
							width: 224rpx;
							height: 150rpx;
							border-radius: 10rpx;
						}
					}
				}

				.time_info {
					margin-top: 20rpx;
					width: 500rpx;

					.a {
						margin-top: 20rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
					}

					.b {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999;

						text {
							margin-right: 20rpx;
						}
					}
				}
			}

			.iconBox {
				position: absolute;
				bottom: 35rpx;
				right: 0;
				display: flex;

				.a {
					margin-left: 70rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 38rpx;
						height: 38rpx;
					}

					text {
						margin-top: 2rpx;
						font-size: 20rpx;
						color: #666666;
					}
				}
			}
		}

		.shop {
			padding: 0 30rpx;
			position: relative;
			background-color: #fff;

			.shopInfo {
				display: flex;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				.infoBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 25rpx;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						margin-bottom: 28rpx;
						width: 450rpx;

						.icon {
							padding: 0 6rpx;
							height: 36rpx;
							background: #F25656;
							border-radius: 4rpx;
							text-align: center;
							line-height: 36rpx;
							font-size: 24rpx;
							color: #fff;
							margin-right: 10rpx;
						}
					}

					.info__rate {
						.score {
							margin-left: 10rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #F86436;
						}

						.conclusion {
							margin-left: 10rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
						}
					}
				}
			}

			.goto {
				position: absolute;
				top: 4rpx;
				right: 12rpx;
				color: #333333;
			}

			.goodsList {
				margin-top: 40rpx;
				display: flex;
				width: 710rpx;
				margin-left: -10rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 216rpx;
					padding: 0 10rpx;

					image {
						width: 216rpx;
						height: 216rpx;
						background: #DEDEDE;
						border-radius: 8rpx;
						margin-bottom: 24rpx;
					}

					text {
						width: 216rpx;
						font-size: 28rpx;
						color: #666666;
					}
				}
			}

			.seeMore {
				margin-top: 30rpx;
				display: flex;
				justify-content: center;

				text {
					width: 180rpx;
					height: 60rpx;
					border: 2rpx solid #DEDEDE;
					border-radius: 30rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #9A9A9A;
				}
			}
		}

		.sellerInfo {
			padding: 0 30rpx;

			.menuBar {
				display: flex;
				line-height: 40rpx;
				padding: 0 80rpx;
				font-size: 32rpx;

				text {
					flex: 1;
					text-align: center;
					color: #666;
					font-weight: bold;
				}

				// .active {
				// 	font-weight: bold;
				// 	position: relative;

				// 	&::after {
				// 		position: absolute;
				// 		bottom: 4rpx;
				// 		left: 50%;
				// 		margin-left: -25rpx;
				// 		content: "";
				// 		width: 50rpx;
				// 		height: 4rpx;
				// 		background: #36C177;
				// 		border-radius: 2rpx;
				// 	}
				// }
			}

			.commission {
				margin-top: 30rpx;
				.commission_label{
					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}
					
					.item_box {
						display: flex;
						justify-content: space-between;
					
						.item {
							margin-top: 20rpx;
							width: 210rpx;
							padding: 8rpx 0;
							background: #F6FCF9;
							border-radius: 4rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #36C177;
						}
					}
				}
				.eva-box {
					display: flex;
					padding: 20rpx 0;

					.portrait {
						flex-shrink: 0;
						width: 80rpx;
						height: 80rpx;
						background-color: #eee;
						border-radius: 40rpx;
					}

					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						font-size: $uni-font-size-base;
						color: $mall-color-base;
						padding-left: 26rpx;

						.con {
							font-size: $uni-font-size-base;
							color: $font-color-dark;
							padding: 20rpx 0;
						}

						.bot {
							display: flex;
							justify-content: space-between;
							font-size: $uni-font-size-sm;
							color: $font-color-light;
						}
					}

					.comment-pics {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 30rpx 0;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 10rpx;

						}
					}
				}
			}

			.sellerInfoDetail {
				margin-top: 30rpx;

				.sellerInfoText {
					width: 690rpx;
					padding: 30rpx;
					box-sizing: border-box;
					background: #FAFAFA;
					border-radius: 8rpx;

					.cell {
						display: flex;
						margin: 20rpx 0;

						.a {
							width: 140rpx;
							font-size: 24rpx;
							color: #999999;
						}

						.b {
							flex: 1;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}

				.sellerInfoImg {
					margin-top: 30rpx;
					width: 690rpx;
					padding: 30rpx;
					box-sizing: border-box;
					background: #FAFAFA;
					border-radius: 8rpx;

					.title {
						font-size: 28rpx;
					}

					.img_box {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						image {
							margin-top: 30rpx;
							background-color: #fff;
							min-width: 300rpx;
							width: 300rpx;
							height: 200rpx;
						}
					}

				}
			}
		}
	}
</style>
